<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>JSON Example</title>
<link rel="stylesheet" type="text/css" media="screen" href="./themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<script src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">

$(function() {
			//jQuery("#list2").jqGrid('GridUnload');
			jQuery("#list2").jqGrid({
			   	url:'user_conn.jsp',
				datatype: "json",
			   	colNames:['UID','U_NAME', 'BIRTHDAY', 'TITLE'],
			   	colModel:[
			   		{name:'UID',index:'UID', width:55, editable:false,editoptions:{readonly:true,size:10}},
			   		{name:'U_NAME',index:'U_NAME', width:55, editable:true},
			   		{name:'BIRTHDAY', index:'BIRTHDAY', width:60, editable:true},
			   		{name:'TITLE', index:'TITLE', width:55, editable:true}
			   	],
			   	ondblClickRow: function(UID){ 
			   		alert("You double click row with id: "+UID);
			   		jQuery("#list3").jqGrid({
					   	url:'mt_role_conn.jsp?UID='+UID,
						datatype: "json",
					   	colNames:['MID','UID', 'RID'],
					   	colModel:[
					   		{name:'MID',index:'MID', width:90, editable:false},
					   		{name:'UID',index:'UID', width:100, editable:true},
					   		{name:'RID', index:'RID', width:200, editable:true}
					   	],
					   	rowNum:10,
					   	rowList:[10,20,30],
					   	//pager:'#pager2',
					   	sortname: 'MID',
					    viewrecords: true,
					    sortorder: "desc",
						//loadtext: "Loading...",
					    caption:"JSON Example",
					    height: '100%',
					    setGridWidth: true,
					    //editurl:"role_conn.jsp",
					}); 
			   	},
			   	rowNum:10,
			   	rowList:[10],
			   	pager:'#pager2',
			   	sortname: 'UID',
			    viewrecords: true,
			    sortorder: "desc",
			    caption:"JSON Example",
			    height: '100%',
			    editurl:"user_edit_conn.jsp"

			});
		$('.loading').show();
		$('.loading').hide();

		jQuery("#list2").jqGrid(
				'navGrid',
				'#pager2',

				{
					edittext : "",
					edittitle : "Edit selected row",
					addtext : "",
					addtitle : "Add new row",
					deltext : "",
					deltitle : "Delete selected row",
					searchtext : "",
					searchtitle : "Find records",
					refreshtext : "",
					refreshtitle : "Reload Grid",
					alertcap : "Warning",
					alerttext : "Please, select row",
					viewtext : "",
					viewtitle : "View selected row"
				}, //options

				{
					editCaption : "Edit Record",
					bSubmit : "전송",
					bCancel : "취소",
					bClose : "Close",
					saveData : "Data has been changed! Save changes?",
					bYes : "Yes",
					bNo : "No",
					bExit : "Cancel",
					closeAfterEdit : true,
					reloadAfterSubmit : false
				}, // edit options

				{
					addCaption : "Add Record",
					bSubmit : "?�송",
					bCancel : "취소",
					clearAfterAdd : true,
					processData : "Processing...",
					height : 280,
					closeAfterAdd : true,
					reloadAfterSubmit : false
				}, // add options

				{
					caption : "Delete",
					msg : "Delete selected record(s)?",
					bSubmit : "전송",
					bCancel : "취소",
 				} // del options
				);
			$("#bedata").click(
					function(){
						jQuery("#list2").jqGrid('sortGrid',"BIRTHDAY",false);
				}
					);			

});


</script>
</head>
<body>


<table id="list2"></table>
<table id="list3"></table>
<div id="pager2"></div>
<br>
<input type="BUTTON" id="bedata" value="Edit Selected" />

</body>
</html>